<template>
  <base-layout>
    <template #searchPanel>
      <el-form :inline="true" :model="fromdata">
        <el-form-item label="品牌">
          <el-select
            style="width: 150px"
            v-model="fromdata.brandId"
            @change="getCarSeries"
            @clear="clearCarModelSelectOptions(1)"
          >
            <el-option
              v-for="item in carBrandOptions"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车系">
          <el-select
            clearable
            style="width: 150px"
            v-model="fromdata.seriesId"
            @change="getTimeType"
            @clear="clearCarModelSelectOptions(2)"
          >
            <el-option
              v-for="item in carSeriesOptions"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年款">
          <el-select
            clearable
            ref="dragSelect"
            style="width: 150px"
            v-model="fromdata.timeType"
            class="drag-select"
            @change="getCarModel"
            @clear="clearCarModelSelectOptions(3)"
          >
            <el-option
              v-for="item in timeTypesOptions"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车型">
          <el-select
            clearable
            style="width: 150px"
            v-model="fromdata.modelName"
          >
            <el-option
              v-for="item in carModelOptions"
              :key="item.id"
              :value="item.id"
              :label="item.modelName"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="searc-btn">
          <el-button type="success" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :isShowSelection="true"
        @selection-change="selectCarChange"
        :isShowSerialNum="false"
        :width="160"
        :localPage="false"
      >
        <template #allNum>
          <el-button type="success" @click="add">添加</el-button>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>

<script>
import baseMixinBC from '@/mixins/base_bc'
import {
  getAllBrandByStoreId,
  getSeries,
  getModelTimeType,
  getModelRank,
  dataList,
} from '@/api/after-sale/systemManage/carModel'
import { mapGetters } from 'vuex'
export default {
  props: {
    storeId:[String,Number]
  },
  mixins: [
    baseMixinBC({
      findData: dataList,
      dataName: ['content', 'totalRecords'],
      idName: 'id',
       format(res) {
        return res.map((data) => {
          data.carAllName=`${data.brandName}/${data.seriesName}/${data.modelName}`
          data.guidePrice =(data.guidePrice.split('')).includes('万')?(+data.guidePrice.replace(/万/g,'')*10000):data.guidePrice
          data.guidePrice=data.guidePrice.toFixed(0);
          return data
        })
      },
    }),
  ],
   computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      fromdata: {
        brandId: '', //品牌
        seriesId: '', // 车系
        timeType: '', // 年款
        id: '', // 车型
      },
      carBrandOptions: [],
      carSeriesOptions: [],
      timeTypesOptions: [],
      carModelOptions: [],
      tableColumnAttributes: [
        { name: '品牌/车型/车系', value: 'carAllName', type: 'text', width: '300px' },
        // { name: '车系细分', value: 'modelName', type: 'text' },
        { name: '车身色', value: 'outColor', type: 'text' },
        { name: '内饰色', value: 'inColor', type: 'text' },
        { name: '车顶色', value: 'roofColor', type: 'text' },
        { name: '增配及价格明细', value: 'addPartsDetail', type: 'text' },
        { name: '前装及价格明细', value: 'qzDetail', type: 'text' },
        { name: '厂家指导价(元)', value: 'guidePrice', type: 'text' },
        { name: '标准进价(元)', value: 'internalNum', type: 'text' },
        { name: '备注', value: 'remark', type: 'text' },
      ],
      selectList: [],
    }
  },
  watch: {
    storeId:{
      deep:true,
      immediate:true,
      handler(value){
        let id=value
        if(!value){
          id=this.userInfo.storeId
        }
        this.getAllBrand(id)
        //  this.search();
      }
    }
  },
  methods: {
    // 查询车系
    getCarSeries(value) {
      getSeries(value).then((res) => {
        let { data, success } = res
        this.carSeriesOptions = data
      })
    },
    // 查询年款
    getTimeType() {
      if (!this.fromdata.brandId || !this.fromdata.seriesId) return
      getModelTimeType(this.fromdata.brandId, this.fromdata.seriesId).then(
        (res) => {
          let { data, success } = res
          this.timeTypesOptions = success ? res.data : []
        }
      )
    },
    // 查询车型
    getCarModel() {
      if (
        !this.fromdata.brandId ||
        !this.fromdata.seriesId ||
        !this.fromdata.timeType
      )
        return
      getModelRank(
        this.fromdata.brandId,
        this.fromdata.seriesId,
        this.fromdata.timeType
      ).then((res) => {
        let { data, success } = res
        this.carModelOptions = data
      })
    },
    // 清空查询
    clearCarModelSelectOptions(num) {
      if (num == 1) {
        this.carSeriesOptions = []
        this.timeTypesOptions = []
        this.carModelOptions = []
        this.fromdata.timeType = ''
        this.fromdata.seriesId = ''
        this.fromdata.id = ''
      } else if (num == 2) {
        this.timeTypesOptions = []
        this.carModelOptions = []
        this.fromdata.timeType = ''
        this.fromdata.id = ''
      } else if (num == 3) {
        this.carModelOptions = []
        this.fromdata.id = ''
      }
    },
    search() {
      this.searchOptions =this.fromdata;
      this.currentPage = 1
      this.setTableData()
    },
    // 监听表格选择
    selectCarChange(value) {
      this.selectList = value
    },
  getAllBrand(id){
     getAllBrandByStoreId(id).then((res) => {
      let { data, success } = res
      this.carBrandOptions = data
      this.fromdata.brandId=data&&data[0].id||''
       this.getCarSeries(this.fromdata.brandId)
        this.getTimeType()
        this.getCarModel()
       this.search();
    })
    },
    // 添加
    add() {
      this.$emit('getList', this.selectList)
    },
  },
  mounted() {
   
   
  },
}
</script>

<style lang="scss" scoped>
.search-btn {
  position: absolute;
  right: 20px;
}
</style>
